<template>
    <my-card-title title="表单文件">
        <div slot="actions" style="display: flex;flex-direction: row;width: min-content;align-items: center">
            <a-upload name="upload"
                      :action="uploadOption.url"
                      :multiple="false"
                      :headers="uploadOption.headers"
                      :showUploadList="false"
                      :data="uploadOption.data"
                      @change="handleChange">
                <my-button color="blue">
                    <a-icon type="cloud-upload" slot="icon" style="margin-right: 10px"/>
                    上传文件
                </my-button>
            </a-upload>
        </div>
        <a-table class="my-table"
                 :columns="columns"
                 :dataSource="fileList"
                 :pagination="false">
            <span slot="fileCreateTime" slot-scope="{fileCreateTime:time}">
                {{time}}
            </span>
            <div slot="action" slot-scope="re">
                <a @click="deleteFile(102,re.fileId,re.filePath)">删除</a>
            </div>
        </a-table>
    </my-card-title>
</template>

<script>
    import fileTypeMatch from '@/tools/fileTypeMatch';
    import httpConfig from '@/config/httpConfig';

    const columns = [
        {
            title: '文件名',
            dataIndex: 'fileName',
        },
        {
            title: '上传时间',
            key: 'fileCreateTime',
            scopedSlots: {customRender: 'fileCreateTime'},
        },
        {
            title: '文件大小',
            dataIndex: 'fileSize',
        },
        {
            title: '上传者',
            dataIndex: 'fileCreatorId',
        },
        {
            title: '操作',
            key: 'action',
            scopedSlots: {customRender: 'action'},
        },
    ];
    export default {
        name: 'FileList',
        data () {
            return {
                httpConfig,
                columns,
                fileList: [],
                uploadOption: {
                    url: 'http://localhost:9090/form/file',
                    headers: {
                        authorization: this.$store.getters.getToken,
                    },
                    data: {
                        formId: 102,
                    },

                },
            };
        },
        computed: {
            fileType () {
                return (filename) => {
                    switch (fileTypeMatch(filename)) {
                        case 0:
                            return 'file-jpg';
                        case 1:
                            return 'file-word';
                        default:
                            return 'file-unknown';
                    }
                };
            },
        },
        created() {
            this.getFileList();
        },
        methods: {
            deleteFile(formId, fileId, fileURL) {
                const data = new FormData();
                console.log(`${formId} ${fileId}  ${fileURL}`);
                data.append('formId', 102);
                data.append('fileId', fileId);
                data.append('fileURL', fileURL);
                this.$apis.formAPI.deleteFile(data).then(() => {
                    this.fileList.splice(this.fileList.findIndex((v) => v.fileId === fileId), 1);
                });
            },
            getFileList() {
                this.$apis.formAPI.getFileList(102).then((data) => {
                    this.fileList = data;
                });
            },
            handleChange (info) {
                switch (info.file.status) {
                    case 'done':
                        this.$message.success('文件上传成功！').then(() => {
                            this.getFileList();
                        });
                        break;
                    case 'error':
                        this.$message.error('文件上传失败！').then(() => {
                            this.getFileList();
                        });
                        break;
                }
            },
        },
    };
</script>

<style lang="scss">
    .my-table {
        overflow: hidden;

        .ant-table-row {
            td {
                height: 70px;
                padding: 0 30px !important;
            }

            &:hover {
                td {
                    background: #fafafa !important;
                }
            }
        }

        .ant-table-thead {
            tr {
                th {
                    color: #9EA0A5 !important;
                    font-size: 12px !important;
                    background-color: #fafafa !important;
                    height: 42px !important;
                    padding: 0 30px !important;
                }
            }
        }
    }
</style>
